import { FC, useState } from 'react';
// 引入组件和icon
import { Layout } from 'antd';
import { IRouteComponentProps, Redirect } from 'umi';
import Menu from './components/Menu';
import Header from './components/Header';
import Nav from './components/Nav';

import './index.less';

import { menuList } from './components/Menu';

const { Content, Footer, Sider } = Layout;

const Index: FC<IRouteComponentProps> = ({ children, location }) => {
  // console.log(props.location);
  const [collapsed, set_collapsed] = useState<boolean>(false);

  const onCollapse = (collapsed: boolean) => {
    set_collapsed(collapsed);
  };

  const arr = menuList.filter((item) => item.key === location.pathname);
  const useAuth = JSON.parse(localStorage.getItem('auth') || '[]');

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* Sider是左侧菜单部分 */}
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        {/* 菜单 */}
        <Menu />
      </Sider>
      {/* 右侧部分 */}
      <Layout className="site-layout">
        <Header />
        <Nav />
        <Content style={{ margin: '0 16px' }}>
          <div style={{ margin: '24px 0px', padding: 24, minHeight: 360 }}>
            {/* {children} */}
            {useAuth.includes(+arr[0].auth) ? (
              children
            ) : (
              <Redirect to="/login"></Redirect>
            )}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Index;
